<!DOCTYPE html SYSTEM "http://www.thymeleaf.org/dtd/xhtml1-strict-thymeleaf-4.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">

<head th:include="common/common :: jscss">
    <title>详情</title>
</head>
<body>

<div class="layui-fluid">

    <blockquote class="layui-crumb">
        消息管理>
        <a lay-href="/msg/conf/list.action">消息配置列表</a>
    </blockquote>

    <div class="layui-card">
        <div th:replace="msg/conf/_tab::tab"></div>

        <div class="layui-card-body">
            <form method="post" action="" class="layui-form" lay-filter="zmn-form">
                <input type="hidden" name="msgId" th:value="${obj.msgId}">

                <div class="layui-split">&nbsp;</div>

                <div class="layui-form-item" th:if="${obj.msgId > 0}">
                    <label class="layui-form-label">消息ID：</label>
                    <div class="layui-input-block">
                        <div class="layui-form-mid">
                            <span th:text="${obj.msgId}">msgId</span>
                        </div>
                    </div>
                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label layui-form-required">消息类型：</label>
                    <div class="layui-input-inline" style="width:300px">
                        <select lay-filter="type" id="type" name="type" lay-search lay-verify="required">
                            <option value="" th:selected="${0 == obj.type}">全部</option>
                            <option th:each="type:${msgTypes}" th:value="${type.code}" th:selected="${type.code == obj.type}" th:text="${type.name}"/>
                        </select>
                    </div>
                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label layui-form-required">消息标题：</label>
                    <div class="layui-input-inline" style="width:300px">
                        <input type="text" name="name" onkeyup="wordStatic(this, 'msgTitle')" th:value="${obj.name}" lay-verify="required" autocomplete="off" class="layui-input" maxlength="10"/>
                        <div style="text-align: right">字数统计：<span id="msgTitle" th:text="${obj.name == null ? 0 : #strings.length(obj.name)}">0</span>/10个字</div>
                    </div>
                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label layui-form-required">使用场景：</label>
                    <div class="layui-input-block" style="width: 1200px">
                        <div class="layui-inline">
                            <textarea style="width: 450px" lay-verify="required" onkeyup="wordStatic(this, 'scene')" name="scene" class="layui-textarea" th:text="${obj.scene}" maxlength="30"></textarea>
                            <div style="text-align: right">字数统计：<span id="scene" th:text="${obj.scene == null ? 0 : #strings.length(obj.scene)}">0</span>/30个字</div>
                        </div>
                    </div>
                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label layui-form-required">消息内容：</label>
                    <div class="layui-input-block" style="width: 1200px">
                        <div class="layui-inline">
                            <textarea style="width: 450px" lay-verify="required" onkeyup="wordStatic(this, 'content')" name="content" class="layui-textarea" th:text="${obj.content}" maxlength="50"></textarea>
                            <div style="text-align: right">字数统计：<span id="content" th:text="${obj.content == null ? 0 : #strings.length(obj.content)}">0</span>/50个字</div>
                        </div>
                    </div>
                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label layui-form-required">发送方式：</label>
                    <div class="layui-input-block">
                        <input type="checkbox" name="sendType" value="1" title="运营后台消息"
                               th:checked="${obj.sendType != null && obj.sendType.indexOf('1') != -1}">
                        <input type="checkbox" name="sendType" value="2" title="钉钉消息"
                               th:checked="${obj.sendType != null && obj.sendType.indexOf('2') != -1}">
                        <input type="checkbox" name="sendType" value="3" title="短信"
                               th:checked="${obj.sendType != null && obj.sendType.indexOf('3') != -1}">
                    </div>
                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label">短信模板ID：</label>
                    <div class="layui-input-inline" style="width:150px">
                        <input lay-verify="templetId" type="text" name="templateId" th:value="${obj.templateId}" autocomplete="off" class="layui-input" maxlength="10"/>
                    </div>
                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label layui-form-required">消息落地页：</label>
                    <div class="layui-input-inline" style="width:380px">
                        <input type="text" name="landingPage" lay-verify="required" th:value="${obj.landingPage}" autocomplete="off" class="layui-input" maxlength="128"/>
                    </div>
                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label">消息等级：</label>
                    <div class="layui-input-inline" style="width:150px">
                        <select lay-filter="level" id="level" name="level" lay-search>
                            <option value="" th:selected="${0 == obj.level}">请选择</option>
                            <option th:each="level:${msgLevels}" th:value="${level.code}" th:selected="${level.code == obj.level}" th:text="${level.name}"/>
                        </select>
                    </div>
                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label">消息封面：</label>
                    <div class="layui-upload-drag" id="coverSrc">
                        <input type="hidden" id="coverSrcValue" name="coverSrc">
                        <i class="layui-icon"></i>
                        <p>点击更改图片</p>
                    </div>
                    <div class="layui-inline">
                        <i onclick="previewImg('coverSrcValue')" class="layui-icon layui-icon-search btn-review"></i>
                        <br>
                        <i onclick="deleteImg('coverSrc')"  class="layui-icon layui-icon-delete btn-del funcClass"></i>
                        <br>
                        <span style="color: #9F9F9F;">支持png,jpg,jpeg格式的图片，上传图片尺寸大小550px*120px，文件大小1M以内</span>
                    </div>
                </div>

                <div class="layui-split">&nbsp;</div>

                <div class="layui-form-item submit">
                    <div class="layui-input-block">
                        <button th:if="${#authPermit.checkPermit('/msg/conf/addEdit.action')}" class="layui-btn" lay-submit="" lay-filter="zmn-form-submit">保存</button>
                        <button type="reset" class="layui-btn layui-btn-primary"
                                onclick="layui.admin.events.closeThisTabs();">关闭
                        </button>
                    </div>
                </div>
            </form>
        </div>
    </div>

</div>

<script type="text/javascript" th:inline="javascript">
    function wordStatic(input, id){
        var content = document.getElementById(id);
        if(content && input){
            var value = input.value.replace(/\\n|\\r/gi, '');
            content.innerText = value.length;
        }
    }
</script>

<script type="text/javascript" th:inline="javascript">
    var json = {
        obj: [[${obj}]]
    };

    layui.config({
        version: 20200518,
        base: "/static/lay/"
    }).extend({
        index: "lib/index",
        msg_conf_detail_edit_js: "msg/conf/zmn.plat.msg.conf.detail.edit",
    }).use(['index', 'msg_conf_detail_edit_js']);
</script>
</body>
</html>